<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>积分商城订单</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/integral.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
    <!-- <script type="text/javascript" src="./script/layui/css/layui.css"></script> -->
    <!-- <script type="text/javascript" src="./script/layui/layui.js"></script> -->
    <script type="text/javascript" src="./script/laydate/laydate.js"></script>
    <script type="text/javascript">
        function closeWin(){
            api.closeWin({
            });

            var n = api.pageParam.index;
            if (n == null) {
                n = 0;
            }
            page = n;
        };
    </script>
</head>
<body>
    <header class="aui-bar aui-bar-nav pos">
        <a class="aui-pull-left aui-btn" onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">积分商城订单</div>
    </header>
    <div class="header-d"></div>
    <!-- 积分商城订单 -->
    <div class="intrgral-order-t">
        <ul>
            <li><span>订单编号：</span><input type="tel" id="order_sn"></li>
            <li><span>下单日期：</span><input type="text" id="time"></li>
            <li><button type="submit" onclick="updateData('',true);">搜索</button></li>
        </ul>
    </div>
    <div id="list">
<!--         <div class="intrgral-order">
            <ul>
                <li>
                    <div class="intrgral-order-1">
                        订单号：201814554211581
                        <span>订单状态：<i>已发货</i></span>
                    </div>
                    <div class="intrgral-order-2">
                        <img src="./image/news.jpg">
                        <dl>
                            <dt>商品名称商品名称商品名称商品名称商品名品名称商品名品名称商品名品名称商品名称</dt>
                            <dd>所需积分：<i>20000000</i></dd>
                            <dd>兑换方式：积分兑换 <span>数量：1</span></dd>
                        </dl>
                    </div>
                    <div class="intrgral-order-3">兑换时间：2018-05-05 15:01:42</div>
                </li>
                <li>
                    <div class="intrgral-order-1">
                        订单号：201814554211581
                        <span>订单状态：<i>已发货</i></span>
                    </div>
                    <div class="intrgral-order-2">
                        <img src="./image/news.jpg">
                        <dl>
                            <dt>商品名称商品名称商品名称商品名称商品名品名称商品名品名称商品名品名称商品名称</dt>
                            <dd>所需积分：<i>20000000</i></dd>
                            <dd>兑换方式：积分兑换 <span>数量：1</span></dd>
                        </dl>
                    </div>
                    <div class="intrgral-order-3">兑换时间：2018-05-05 15:01:42</div>
                </li>
            </ul>
        </div> -->
    </div>
</body>
<script type="text/template" id="template">
    <div class="intrgral-order">
        <ul>
            {{~it:value:index}}
            <li>
                <div class="intrgral-order-1">
                    订单号：{{=value.order_sn}}
                    <span>订单状态：<i>{{=value.order_status_format}}</i></span>
                </div>
                <div class="intrgral-order-2">
                    {{? value.img}}
                    <img src="{{=value.img}}">
                    {{??}}
                    <img src="./image/news.jpg">
                    {{?}}
                    <dl>
                        <dt>{{=value.goods_name}}</dt>
                        <dd>所需积分：<i>{{=value.total_score}}</i></dd>
                        <dd>兑换方式：积分兑换 <span>数量：{{=value.number}}</span></dd>
                    </dl>
                </div>
                <div class="intrgral-order-3">兑换时间：{{=value.ex_time}}</div>
            </li>
            {{~}}
        </ul>
    </div>
</script>
<script>

    apiready = function(){
        updateData();
            // 日期选择器
            laydate.render({
               //指定元素
               elem: '#time',
           });
            pullLoading();
        }

      //      layui.use('laydate', function(){
      //         var laydate = layui.laydate;
      //     //执行一个laydate实例
      //     laydate.render({
      //     //指定元素
      //     elem: '#time' 
      // });
      // });


      function updateData(more,is_select) {

            // 进度提示框
            api.showProgress({
                title: '努力加载中...',
                text: '请稍等...',
                modal: false
            });

            if (!more) {
                // 如果不是上拉加载操作,重新获取订单号与日期
                var order_snELe = $api.byId('order_sn');
                order_sn = order_snELe.value;
                var timeEle = $api.byId('time');
                time = timeEle.value;
            }
            
            // 加载更多 页码+1
            if (more)    {
                p += 1;
            }else {
                p = 1;
            }
            var userid = $api.getStorage('userid');
            // 如果已登录 获取数据
            if (userid) {
                api.ajax({
                    url: webAddress + '/index.php?ctl=uc_goods_order&act=integral_order&p=' + p,
                    method: 'post',
                    data: {
                        values: { 
                            id: userid,
                            order_sn: order_sn,
                            time: time,
                        },
                    }
                },function(ret, err){
                    if (ret) {
                        api.hideProgress();
                        // var ret = $api.jsonToStr(ret);
                        // alert(ret);
                        if (ret.status == 0) {
                            // alert(ret.info);
                            api.toast({
                                msg: '无更多记录',
                                duration: 2000,
                                location: 'bottom'
                            });
                            // 点击搜索 无记录 清空模板
                            if (is_select) {
                                var user = $api.byId('list');
                                $api.html(user,'');
                            }
                            return false;
                        } else {
                            var data = ret.info.list;
                            for (var i = 0; i < data.length; i++) {
                                if (data[i].img) {
                                    data[i].img = data[i].img.substr(1);
                                    data[i].img = webAddress + data[i].img;
                                }
                            }
                            templateFun(data);
                        }
                    } else {
                        api.hideProgress();
                        alert( JSON.stringify( err ) );
                    }
                });
            }
        }
        
        // 模板赋值函数
        function templateFun(data) {

            var template = $api.byId('template');
            var dotFn = doT.template(template.innerHTML);
            var html = dotFn(data);
            var user = $api.byId('list');
            if (p == 1) {
                $api.html(user, html);
            }else{
                if (data=='') {
                    api.toast({
                        msg: '没有更多了..',
                        duration: 2000,
                        location: 'bottom'
                    });
                    return;
                }
                $api.append(user, html);
            }

        }

        // // 打开日期选择器
        // function open_canlendar(){

        // }

        // // 搜索按钮
        // function select_order(more){
        //     is_select = 1;
        //     var order_snELe = $api.byId('order_sn');
        //     order_sn = order_snELe.value;
        //     var timeEle = $api.byId('time');
        //     time = timeEle.value;
        //     // 加载更多 页码+1
        //     if (more)    {
        //         p += 1;
        //     }else {
        //         p = 1;
        //     }
        //     var userid = $api.getStorage('userid');
        //     // 如果已登录 获取数据
        //     if (userid) {
        //         api.ajax({
        //             url: webAddress + '/index.php?ctl=uc_goods_order&act=integral_order&p=' + p,
        //             method: 'post',
        //             data: {
        //                 values: { 
        //                     id: userid,
        //                     order_sn: order_sn,
        //                     time: time,
        //                 },
        //             }
        //         },function(ret, err){
        //             if (ret) {
        //             // var ret = $api.jsonToStr(ret);
        //             // alert(ret);
        //             if (ret.status == 0) {
        //                 // alert(ret.info);
        //                 api.toast({
        //                     msg: '无此记录',
        //                     duration: 2000,
        //                     location: 'bottom'
        //                 });
        //                 var user = $api.byId('list');
        //                 if (!more) {
        //                     $api.html(user,'');
        //                 }
        //                 return false;
        //             } else {
        //                 var data = ret.info.list;
        //                 for (var i = 0; i < data.length; i++) {
        //                     if (data[i].img) {
        //                         data[i].img = data[i].img.substr(1);
        //                         data[i].img = webAddress + data[i].img;
        //                     }
        //                 }
        //                 templateFun(data);
        //             }
        //         } else {
        //             alert( JSON.stringify( err ) );
        //         }
        //     });
        //     }
        // }

        // 上拉加载
        function pullLoading(){
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: 0
                }
            }, function(ret, err){
                updateData(true);
                // if (is_select) {
                //     select_order(true);
                // }
            });
        }

        $(".integral-list-t-t li").click(function(){
            $(".integral-list-t-d ul").stop().slideUp();
            $(".integral-list-t-d ul").eq($(this).index()).stop().slideToggle();
        });
    </script>
    </html>
